/* 获取元素 */
const addBtn = document.getElementById("add");
/* 从本地localStorage中读取数据 */
const notes = JSON.parse(localStorage.getItem("notes"));
const addNewNote = (text = "") => {
  /* 创建div元素 */
  const note = document.createElement("div");
  /* div元素添加note类样式 */
  note.classList.add("note");
  /* 往创建的div中添加内容元素 */
  note.innerHTML = `
  <div class="tools">
      <button class="edit"><i class="fas fa-edit"></i></button>
      <button class="delete"><i class="fas fa-trash-alt"></i></button>
  </div>

  <div class="main ${text ? "" : "hidden"}"></div>
  <textarea class="${text ? "hidden" : ""}"></textarea>
  `;
  /* 获取元素 */
  const editBtn = note.querySelector(".edit");
  const deleteBtn = note.querySelector(".delete");
  const main = note.querySelector(".main");
  const textArea = note.querySelector("textarea");
  /* 获取输入的字符 */
  textArea.value = text;
  /*  */
  main.innerHTML = marked(text);
  /* 添加点击事件 */
  deleteBtn.addEventListener("click", () => {
    /* 删除创建的note元素 */
    note.remove();

    updateLS();
  });
  /*  */
  editBtn.addEventListener("click", () => {
    /* main元素身上如果存在hidden类样式就移除没有就添加 */
    main.classList.toggle("hidden");
    /* textArea元素身上如果存在hidden类样式就移除没有就添加 */
    textArea.classList.toggle("hidden");
  });
  /* input事件 */
  textArea.addEventListener("input", (e) => {
    /* 解构出value */
    const { value } = e.target;
    
    main.innerHTML = marked(value);

    updateLS();
  });

  document.body.appendChild(note);
};
const updateLS = () => {
  /* 获取元素 */
  const notesText = document.querySelectorAll("textarea");
  /* 初始化 */
  const notes = [];
  /* 循环 */
  notesText.forEach((note) => notes.push(note.value));
  /* 存入localStorage中 */
  localStorage.setItem("notes", JSON.stringify(notes));
};
/* 存在 */
if (notes) {
  /* 循环notes */
  notes.forEach((note) => {
    addNewNote(note);
  });
}
addBtn.addEventListener("click", () => addNewNote());
